import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form, Tabs } from 'antd'
import Login from './com/login'
import Operate from './com/operate'
import PropTypes from 'prop-types'

import Style from './list.css'

const { TabPane } = Tabs
class List extends Component {
  static propTypes = {
    loginData: PropTypes.any,
    getLoginList: PropTypes.func,
    operateData: PropTypes.any,
    getOperateList: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {
      activeTab: '2'
    }
    this.loginPageChange = this.loginPageChange.bind(this)
    this.tabChange = this.tabChange.bind(this)
  }

  componentDidMount () {
    this.props.getLoginList({
      pageSize: 20,
      pageNo: 1
    })
  }

  tabChange (value) {
    if (value === '1') {
      this.props.getLoginList({
        pageSize: 20,
        pageNo: 1
      })
    } else {
      this.props.getOperateList({
        pageSize: 20,
        pageNo: 1
      })
    }
  }

  loginPageChange (params) {
    this.props.getLoginList(params)
  }

  operateSearch = (params) => {
    this.props.getOperateList(params)
  }

  render () {
    const { activeTab } = this.state
    const { loginData, operateData } = this.props
    return (
      <>
        <div className={Style['container']}>
          <Tabs defaultActiveKey={activeTab} onChange={this.tabChange} tabBarGutter={40} tabBarStyle={{ margin: '0px' }}>
            <TabPane tab='登陆日志' key='1'>
              <div className={Style['tab-pane-container']}>
                <div className={Style['content']}>
                  <Login loginData={loginData} loginPageChange={this.loginPageChange} />
                </div>
              </div>
            </TabPane>
            <TabPane tab='操作日志' key='2'>
              <div className={Style['tab-pane-container']}>
                <div className={Style['content']}>
                  <Operate operateData={operateData} operateSearch={this.operateSearch} />
                </div>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </>
    )
  }
}

const mapState = state => ({
  loginData: state.setup.loginData,
  operateData: state.setup.operateData
})
const mapDispatch = dispatch => ({
  getLoginList: dispatch.setup.getLoginList,
  getOperateList: dispatch.setup.getOperateList
})
const FormList = Form.create()(List)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormList)
)
